<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>搜索机构</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css"/>
    <style>
        .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.7rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 19px 19px;
        }

        .aui-bar-nav .aui-iconfont1 {
            position: relative;
            z-index: 20;
            font-size: 0.9rem;
            color: #ffffff;
            line-height: 2.4rem;
            padding-left: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            min-height: 2.4rem;
            position: absolute;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            right: 0.75rem;
            left: 1.5rem;
            /* width: auto; */
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
        }

        .aui-searchbar {
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            height: 2.4rem;
            overflow: hidden;
            width: 98%;
            background-color: #ffffff;
            color: #9e9e9e;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .aui-searchbar-input {
            margin-right: 2.5rem;
            background-color: #F5F7F8;
            border-radius: 1rem;
            height: 30px;
            line-height: 30px;
            font-size: 0.7rem;
            position: relative;
            /*padding-left: 0.0rem;*/
            display: -webkit-box;
            -webkit-box-flex: 1;
            /*padding-right:1.0rem;*/
        }

        .aui-icon-rightu {
            height: 2.4rem;
            width: 49px;
            margin-top: 0.1rem;
            margin-right: 0.2rem;
        }

        .aui-searchbar .aui-iconfont {
            line-height: 1.50rem;
            color: #9e9e9e !important;
        }

        .aaaa {
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 13px;
            color: rgba(204, 204, 204, 1) !important;
            display: inline-block;
            vertical-align: top;
            margin-top: 1px;
        }

        .aui-icon-search:before {
            content: '';
            width: 15px;
            height: 1.50rem;
            background: url('__IMG__main1Search.png') no-repeat center center;
            background-size: 15px 15px;
            display: inline-block;
        }

        .cancel {
            /*position: absolute;*/
            /*top: 50%;*/
            /*right: 0.8rem;*/
            /*transform: translateY(-50%);*/
            color: #282828;
            font-size: 0.75rem;
        }

        .city-area {
            position: relative;
            overflow: scroll;
        }

        .city-slide {
            position: fixed;
            right: 0;
            bottom: 7.2rem;
            width: 1.225rem;
            background: white;
            overflow-y: scroll;
            padding-top: 0;
        }

        .slide-item {
            padding: 0.15rem 0;
            text-align: center;
            color: #333333;
            background-color: rgba(0, 0, 0, 0);
            font-size: 0.6rem;
            background: white;
        }

        .location {
            background: #ffffff;
            padding-left: 0.8rem;
            padding-top: 0.8rem;
        }

        .location .name {
            color: #999999;
            font-size: 0.7rem;
            margin-bottom: 0.75rem;
        }

        .locate {
            display: inline-flex;
            align-items: center;
            min-width: 2.45rem;
            height: 1.5rem;
            border-radius: 0.875rem;
            background: white;
            position: relative;
            text-align: center;
            margin-right: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .locate:before {
            content: '';
            height: 199%;
            width: 201%;
            position: absolute;
            top: -51%;
            left: -51%;
            border-radius: 1.75rem;
            border: 1px solid #DBDBDB;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
            font-size: 1.1rem;
        }

        .locate1:before {
            content: '';
            height: 199%;
            width: 201%;
            position: absolute;
            top: -51%;
            left: -51%;
            border-radius: 1.75rem;
            border: 1px solid #E0474C;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
            font-size: 1.1rem;
        }

        .icon-location3 {
            /*width: 0.85rem;*/
            height: 0.85rem;
            /*background: url("../../image/location3.png") center center no-repeat;*/
            background-size: 0.85rem 0.85rem;
            margin-left: 0.25rem;
            margin-right: 0.4rem;
        }

        .city-name {
            color: #3D3D3D;
            font-size: 0.7rem;
            padding-right: 0.5rem;
        }

        .city-name1 {
            color: #E73C5C;
        }

        .item-title {
            color: #3D3D3D;
            font-size: 0.7rem;
            padding-left: 0.8rem;
            height: 2rem;
            line-height: 1.25rem;
            background: #F8F8F8;
        }

        .city-list {
            background-color: white;
            padding-left: 0.8rem;
            padding-right: 1.875rem;
        }

        .city-item {
            height: 2.05rem;
            background-color: white;
            color: #282828;
            font-size: 0.8rem;
            line-height: 2.05rem;
        }

        .choose {
            display: inline-block;
            font-size: 0.8rem;
            color: #282828;
            /*margin-left: 0.5rem;*/
        }

        .qgx {
            width: 100%;
            height: 1px;
            background: #DBDBDB;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5)
        }

        .qgx2 {
            position: absolute;
            top: 2.3rem;
            left: 0;
            z-index: 10000;
        }

        .icon_pic {
            width: 0.8rem;
            height: 0.8rem;
            /*background: url("../../image/location3.png") no-repeat ;*/
            background-size: 100%;
            margin-top: 0.8rem;
        }

        .dingwei {
            float: left;
        }

        .font {
            color: #B3B3B3;
            font-size: 0.6rem;
            line-height: 2.65rem;
            margin-left: 0.5rem;
        }

        input[type="text"], input[type="password"], input[type="tel"] {
            width: 100%;
            height: 1.6rem;
            color: #010101;
            background-color: #F5F5F5;
            outline: none;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 0.8rem;
            margin-top: 5px;
            padding-left: 1.75rem;
            line-height: 1.6rem;
            border-radius: 0.8rem;
        }

        .fudong {
            position: absolute;
            top: 0.6rem;
            left: 1.5rem;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav " style="padding-top:1.25rem;background-color:#FFFFFF;" id="header">

    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span>
    </a>

    <div class="aui-title">
        <div class="aui-searchbar" style="padding-right:2.75rem" id="search">
            <input type="text" name="mechanism_name" value="" placeholder="输入机构名">
            <span class="aui-icon-search fudong"></span>
        </div>
    </div>
    <a class="aui-pull-right" href="javascript:;">
        <span class="aui-iconfont aui-icon-rightu" onclick="searchM(this)">搜索</span>
    </a>
</header>
<div class="city-area" style="flex: 1;">
    <div class="city-slide" id="render-item-1"></div>
    <div id="render-item-2">

    </div>
</div>
</body>
<script type="text/template" id="template-item-1">

</script>
<script type="text/template" id="template-item-2">

</script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__pinyin_dict_firstletter.js"></script>
<script type="text/javascript" src="__JS__pinyinUtil.js"></script>
<script type="text/javascript">
    window.onload = function () {
        initData();
    };
    function render_jigou(data) {
        var html = "";
        var arr1 = data[0];
        var arr2 = data[1];
        for (var i = 0; i < arr1.length; i++) {

            html += '<div class="item">';
            html += '<div class="item-title" style=' + 'background-color:#F5F5F5;height:1.25rem;' + 'name=' + arr1[i] + '>' + arr1[i] + '</div>';
            html += '<div class="city-list">';
            for (var j = 0; j < arr2[arr1[i]].length; j++) {
                html += '<div class="city-item underLine  aaa" name=' + arr2[arr1[i]][j].mechanism_id + ' tapmode onclick="choose_city(this)">' + arr2[arr1[i]][j].name + '</div>';
            }
            html += '</div></div>';
        }
        return html;
    }
    function render_zimu(data) {
        var html = "";
        var arr1 = data[0];
        for (var i = 0; i < arr1.length; i++) {
            html += '<div class="slide-item" tapmode onclick="scrollToTag(' + arr1[i] + ')">' + arr1[i] + '</div>'
        }
        return html;
    }

    var json_m = {
        'mechanism': []
    };
    var obj_m = {};

    function initData(dat) {
//        var data = dat;
        console.log(dat.data)
        json_m.mechanism.push(dat.data);
        control_json_m(); //渲染城市列表
    }

    function control_json_m() {
        for (var i = 0; i < json_m.mechanism[0].length; i++) {
            // console.log(JSON.stringify(json));;
            var key = pinyinUtil.getFirstLetter(json_m.mechanism[0][i].name[0]);
            console.log(key)
            if (obj_m[key]) {
                obj_m[key].push(json_m.mechanism[0][i]);
            } else {
                obj_m[key] = [];
                obj_m[key].push(json_m.mechanism[0][i]);
            }
        }

        var keysArr = Object.keys(obj_m).sort();
        var renderData = [];
        renderData[0] = keysArr;
        renderData[1] = obj_m;

        $api.html($api.byId('render-item-1'), render_zimu(renderData));
        $api.html($api.byId('render-item-2'), render_jigou(renderData));
    }

    $.ajax({
        url:'{:url("mechanism/ajaxMechanismList")}',
        data:'',
        type:'POST',
        dataType:'JSON',
        success:function (data) {
            initData(data)
        }
    })

    //跳转到指定页面
    function scrollToTag (tag) {
        $api.dom('[name=\'' + tag + '\']').scrollIntoView(true);
    }
    //跳转机构详情 搜索时点击机构名称
    function choose_city(el) {
        var mechanism_id =$api.attr(el,'name');
        location.href='{:url("Mechanism/mechanismDetail")}?mechanism_id=' + mechanism_id;
    }
    //跳转机构详情   手动输入搜索
    function searchM(el) {
        var key = $("input[name='mechanism_name']").val();
        if(key != ''){
            location.href='{:url("Mechanism/searchMecList")}?key=' + key;
        }
    }






</script>

</html>
